<!--
 * @Author: jyq
 * @Date: 2022-01-08 19:50:25
 * @LastEditTime: 2022-01-09 15:29:24
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \project_am\am-ui\src\pages\ex\ex1.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="device">
    <!-- 头部 -->
    <div class="header">
      <el-select
        v-model="onlineStatus"
        clearable
        placeholder="请选择设备在线状态">
        <el-option label="离线" value="离线"> </el-option>
        <el-option label="在线" value="在线"> </el-option>
      </el-select>
      <el-select
        v-model="bdStatus"
        clearable
        placeholder="请选择设备绑定状态"
        style="margin: 0 10px">
        <el-option
          v-for="item in bdStatusOpt"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input
        placeholder="请输入内容"
        style="width: 180px"
        v-model="inputVal"
        clearable>
      </el-input>
      <el-button type="success" style="margin: 0 10px">搜索</el-button>
      <el-button type="success" @click="showDrawer" style="float: right">录入</el-button
      >
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        type="index"
        :index="1"
        label="序号"
        width="90">
      </el-table-column>
      <el-table-column
        prop="serial_number"
        label="编号"
        min-width="180"
        aligen="center">
      </el-table-column>
      <el-table-column prop="name" label="名称" min-width="180" aligen="center">
      </el-table-column>
      <el-table-column
        prop="online_status"
        label="在线状态"
        min-width="180"
        aligen="center">
        <template slot-scope="scope">
          <el-tag type="danger" v-if='scope.row.online_status==0'>
            离线
          </el-tag>
          <el-tag type="success" v-if='scope.row.online_status==1'>
            在线
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="bind_status"
        label="绑定状态"
        min-width="180"
        aligen="center">
        <template slot-scope="scope">
          <el-tag type="danger" v-if='scope.row.bind_status==0'>
            未绑定
          </el-tag>
          <el-tag type="success" v-if='scope.row.bind_status==1'>
            已绑定
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作" width="150">
        <template slot-scope="scope">
         <el-button type="text" @click="editBtn(scope.row)">修改</el-button>
         <el-button type="text" @click="deleteBtn(scope.row.id)" style="color:red">删除</el-button>
        </template>
         </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%" >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm" >
        <el-form-item label="编号" prop="serial_number">
          <el-input v-model="ruleForm.serial_number" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="drawer=false">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" >提交</el-button >       
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { get,postJSON,del } from "../../utils/request";

export default {
  data() {
    return {
      onlineStatus: "",
      bdStatus: "",
      bdStatusOpt: [
        {
          label: "未绑定",
          value: "未绑定",
        },
        {
          label: "已绑定",
          value: "已绑定",
        },
      ],
      inputVal: "",
      tableData: [],
      drawer: false,
      direction: "rtl",
      ruleForm: {
        name: "",
        serial_number: "",
        id:''
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        serial_number: [
          { required: true, message: "请输入编号", trigger: "blur" },
        ],
      },
      title:''
    };
  },
  created() {},
  mounted() {
    this.getDeviceList();
  },
  methods: {
    // 查询设备列表
    getDeviceList() {
      let url = "/device/pageQuery";
      get(url, {
        page: 1,
        pageSize: 10,
        name: "",
        bind_status: "",
        online_status: "",
      }).then((res) => {
        console.log(res);
        if (res && res.status == 200 && res.data && res.data.list) {
          this.tableData = res.data.list;
        } else {
          this.tableData = [];
        }
      });
    },
    // 保存或更新设备
    addDevice(){
     postJSON('/device/saveOrUpdate',this.ruleForm).then(res=>{
       console.log(888,res)
       if(res&&res.status==200){
         if(this.ruleForm.id){
           this.$message({
          showClose: true,
          message: '恭喜你，修改成功',
          type: 'success'
         })
         }else{
           this.$message({
          showClose: true,
          message: '恭喜你，添加成功',
          type: 'success'
        });
         }
        this.drawer = false
        this.getDeviceList()
       }else{
         this.$message({
          showClose: true,
          message: '添加失败',
          type: 'error'
        });
       }
     })
    },
    //删除信息
    deleteBtn(id){
      del('/device/deleteById',{
        id:id
      }).then(res=>{
        if(res&&res.status==200){
          this.$message({
          showClose: true,
          message: '设备信息删除成功',
          type: 'success'
        });
       this.getDeviceList();
        }else{
           this.$message({
          showClose: true,
          message: '设备信息删除失败',
          type: 'error'
        });
        }
      })
      
    },
    //打开抽屉
    showDrawer(){
       this.drawer=true 
       this.title='添加设备信息'
       this.ruleForm={}
       this.$refs['ruleForm'].resetFields();
    },
    handleClose(done) {
      done();
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addDevice();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改设备信息
    editBtn(row){
     this.drawer = true
     this.$refs['ruleForm'].resetFields();
     this.title= '修改设备信息'
     this.ruleForm={
       serial_number:row.serial_number,
       name:row.name,
       id:row.id
     }
    }
  },
};
</script>

<style lang="scss" scoped>
.device {
  padding: 5px;
  .header {
    margin-top: 20px;
  }
}
</style>
